import React, { FC, useEffect } from "react";
import { OptionType, QuestionCheckboxPropsType } from "./interface";
import { Button, Checkbox, Form, Input, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { nanoid } from "@reduxjs/toolkit";
const PropComponent: FC<QuestionCheckboxPropsType> = (
  props: QuestionCheckboxPropsType
) => {
  const { title, isVertical, list = [], onChange, disabled } = props;
  const [form] = Form.useForm();
   useEffect(() => {
    form.setFieldsValue({ title, isVertical,list });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [title, isVertical,  list]);
  
  function handleValuesChange() {
    if (onChange == null) return;
    const newValues=form.getFieldsValue() as QuestionCheckboxPropsType
    //清除 text 是undefined 情况
    if(newValues.list){
        newValues.list=newValues.list.filter(opt=>!(opt.text==null))
    }
    const {list=[]}=newValues
    list.forEach(opt=>{
        if(opt.value) return 
        opt.value=nanoid() 
    })
    onChange(newValues)
  }
  return (
    <Form
      layout="vertical"
      initialValues={{ title, isVertical, list }}
      disabled={disabled}
      onValuesChange={handleValuesChange}
      form={form}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: "请输入标题" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="标题" name="value">
        <Input />
      </Form.Item>
       <Form.Item label="选项">
        <Form.List name="list">
          {/* 遍历所有选项 */}
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }, index) => {
                return (
                  <Space key={key} align="baseline">
                    {/* 当前选项是否选中 */}
                    <Form.Item name={[name,'checked']} valuePropName="checked">
                      <Checkbox/>
                    </Form.Item>
                    {/* 当前选项输入框 */}
                    <Form.Item
                      name={[name, "text"]}
                      rules={[
                        { required: true, message: "请输入选项文字" },
                        {
                          validator: (_, text) => {
                            const { list = [] } = form.getFieldsValue();
                            let num = 0;
                            list.forEach((opt: OptionType) => {
                              if (opt.text === text) num++; //记录text 相同的个数 预期只有一个
                            });
                            if (num === 1) return Promise.resolve();
                            return Promise.reject(
                              new Error("和其他选项重复了")
                            );
                          },
                        },
                      ]}
                    >
                 
                      <Input placeholder="请输入选项文字" />
                    </Form.Item>
                    {/* 当前选项删除按钮 */}
                    {index > 0 && (
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(name);
                        }}
                      />
                    )}
                  </Space>
                );
              })}
              {/* 添加选项 */}
              <Form.Item>
                <Button
                  type="link"
                  onClick={() => add({ text: "", value: " " })}
                  icon={<PlusOutlined />}
                  block
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item name="isVertical" valuePropName="checked">
        <Checkbox>垂直显示</Checkbox>
      </Form.Item>
    </Form>
  );
};
export default PropComponent;
